<template>
  <div class="flex flex-col h-full">
    <vxe-card title="" class="w-full" :border="false">
      <AuForm ref="formRef" :formList="formList" @submit="search" />
    </vxe-card>

    <div class="flex-grow overflow-hidden mt-4">
      <AuTable ref="tableRef" v-bind="gridOption">
        <template #link_default="{ row }">
          <el-link :href="row.link" target="_blank" type="primary"
            >{{ t("device_model.download") }}
          </el-link>
        </template>
      </AuTable>
    </div>

    <UpdateModel v-model="showModel" :formData="rowData" @submit="search" />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { AuTable } from "@/components/AuTable";
import { AuForm } from "@/components/AuForm";
import {
  ACTION_TYPE,
  ObjectProps,
  PropDefines
} from "@/components/AuTable/type";
import { deviceEnterGetListModel } from "@/api/factory/device";
import UpdateModel from "@/views/factory/deviceMaintain/checkUpdate/UpdateModel.vue";
import { FACTORY_TYPE_LIST } from "@/utils/constants";
import { useI18n } from "vue-i18n";
import { setDeviceTypeTrans } from "@/utils/tool";

defineOptions({
  name: "FactoryCheckUpdate"
});

// region 声明ref变量集合
const { proxy } = getCurrentInstance();
const { t, te } = useI18n();
const formList = ref([
  {
    type: "select",
    key: "device_type",
    label: "device_model.form.device_type",
    placeholder: "device_model.form.device_type_placeholder",
    emptyValues: [null, undefined],
    options: [
      { value: "", label: "device_model.form.all_types" },
      ...FACTORY_TYPE_LIST
    ],
    labelKey: "label",
    valueKey: "value",
    defaultValue: ""
  }
]);
const gridOption = reactive<PropDefines>({
  isServerPage: true,
  columns: [
    {
      field: "device_model",
      title: "device_model.table.device_model",
      minWidth: 150,
      align: "center"
    },
    {
      field: "device_type",
      title: "device_model.form.device_type",
      minWidth: 150,
      align: "center",
      formatter({ row }) {
        return setDeviceTypeTrans(row.device_model, { te, t });
      }
    },
    {
      field: "device_model_info",
      title: "device_model.table.device_model_info",
      minWidth: 150,
      align: "center"
    }
  ],
  actions: [],
  topTools: [],
  operateTools: [],
  dataSource: [],
  fetchConfig: {
    query: {
      service: (params: ObjectProps) => {
        params.hiddenDeviceType = true;
        return deviceEnterGetListModel(params);
      },
      param: () => formRef.value.getFormData()
    }
  }
});
const showModel = ref(false);
const rowData = ref(null);
const formRef = ref();
const tableRef = ref();
// endregion

// region 公共方法的集合
// endregion

// region 组件事件的集合
const search = () => {
  tableRef.value.refresh();
};

// endregion
</script>
